<template>
  <div>
    <div class="list_banner">
      <p>关于我</p>
    </div>
    <div class="container">
      <el-card class="container-card">
        <div class="avatar">
          <img src="@/assets/image/avatar.jpg" title="忘月" />
        </div>
        <div class="wrap">
          <h2 class="title">个人简介</h2>
          <p><b>小号:</b>忘月</p>
          <p><b>姓名:</b>马幸龙</p>
          <p><b>邮箱:</b>2603219116@qq.com</p>
          <p><b>职业:</b>王者职业射手</p>
        </div>
        <div class="wrap">
          <h2 class="title">内心独白</h2>
          <p>
            享受一个人的孤独，偶尔下班回家，都会灯也不开地坐在沙发上想一些乱七八糟的事。
          </p>

          <p>也喜欢一群人的欢乐，有说，有笑确实是最开心的事。</p>

          <p>觉得自己还是个孩子，却要时刻提醒自己不能任性了</p>

          <p>
            想说的太多，却不知道从何开始，每个人都有自己的故事，回首自己的过去，不管怎样都是
          </p>
          <p>最精彩的人生……</p>

          <p>
            我会在这里记录的故事，抒写自己的心情，不为别的，只为让自己心情愉悦0.0
          </p>
        </div>
        <div class="about_ft">
          <h3>世界很简单，人心很复杂，不会变化的永远都是最开始的初心</h3>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [""],
  data() {
    return {
      showSectionId: "#info",
    };
  },
  created() {},
  mounted() {},
  methods: {
    showSection(name) {
      this.showSectionId = name;
    },
  },
};
</script>
<style scoped lang='less'>
.list_banner {
  background: url("@/assets/image/column-zy.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  height: 200px;
}
.list_banner p {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #3333334d;
}

.container {
  margin-top: 15px;
  // height: 32em;
  margin-bottom: 100px;
}
.container-card /deep/ .el-card__body {
  overflow: hidden;
  // background: url(../images/abbg.png) no-repeat right top #fff;
  margin-top: 15px;
  border-radius: 10px;
  padding: 20px;
}
.title {
  margin: 20px 0;
  font-size: 18px;
  background: url(@/assets/image/hline.png) no-repeat bottom right;
  width: 120px;
  clear: both;
  background-size: 40px;
  border-bottom: #000 1px dashed;
  padding-left: 10px;
  padding-bottom: 5px;
  display: inline-block;
}
.wrap p {
  margin-bottom: 15px;
  margin-left: 2em;
  color: #666;
  font-size: 15px;
}
.wrap b {
  letter-spacing: 5px;
  margin-right: 10px;
}
.avatar {
  // width: 80px;
  // height: 80px;
  margin: 1rem auto;
  margin-top: 1em;
  // background: #fff;
  // border-radius: 100%;
  // border: #fff 5px solid;
  // transition: transform 0.5s;
  // position: relative;
  // float: left;
  // margin-right: 10px;
  background: -webkit-linear-gradient(
    bottom left,
    rgba(0, 153, 255, 0.9),
    rgba(42, 228, 197, 0.7)
  );
  background: -o-linear-gradient(
    bottom left,
    rgba(0, 153, 255, 0.9),
    rgba(42, 228, 197, 0.7)
  );
  background: linear-gradient(
    to top right,
    rgba(0, 153, 255, 0.9),
    rgba(42, 228, 197, 0.7)
  );
  display: block;
  padding: 2px;
  width: 80px;
  border-radius: 50%;

  img {
    width: 100%;
    border-radius: 50%;
    /*transition: .6s;*/
  }

  img:hover {
    transform: rotate(360deg);
    transition: all 1.5s;
  }
}
.about_ft {
  text-align: center;
  margin-top: 20px;
  border-top: 1px solid #666;
}
.about_ft h3 {
  margin-top: 10px;
}
</style>